<template>
	<view class="feedback" style="width: 100%;" >
		<u-toast ref="uToast" />
		<view class="feedback-top">
			吐槽反馈
			<img @click="back" src="@/static/img/common_btn_return_n.png" style='width: 10px;height: 19px;' alt="">
		</view>
		
		<view class="done" v-if="show_type == 0" >
			<view v-for="item in list" @click="show_detail(item)" class="done-item">
				<span>{{item.title}}</span>
				<view class="done-item-2" v-for='_item in dict.status' :key='_item.id' v-if="_item.value == item.status" >{{_item.type}}</view>
				<view class="done-item-3">{{item.createDate}}</view>
			</view>
			<view @click='getMore'>
				<u-loadmore :status="status"  style="padding-bottom: 20px;" />
			</view>
			
		</view>
		<view class="done1" v-if="show_type == 1">
			<u-input v-model="add_title" placeholder="建议标题"></u-input>
			<u-input
			  type="textarea"
			  :rows="20"
			  placeholder="请输入内容"
			  v-model="add_content">
			</u-input>
		</view>
		<view class="done1" v-if="show_type == 2">
			<u-input v-model="detail.object.title"  disabled="disabled"></u-input>
			<u-input v-for='_item in dict.status' :key='_item.id' v-if="_item.value == detail.object.status" :value="_item.type"  disabled="disabled"></u-input>
			<u-input
			  type="textarea"
			  :rows="7"
			   disabled="disabled"
			  placeholder="请输入内容"
			  v-model="detail.object.content">
			</u-input>
			<view class="star" v-if="detail.object.status == 4">
				<span style="float: left;" >评价分数：</span><u-rate style="float: left;" v-model="star"></u-rate>
			</view>
			
			<u-input
			  type="textarea"
			  :rows="7"
			  v-if="detail.object.status == 4"
			  placeholder="请输入评价内容"
			  v-model="detail_comment">
			</u-input>
		</view>
		<view class="feedback-add" v-if="show_type == 0" @click="add">新增建议</view>
		<view class="feedback-add" v-if="show_type == 2" @click="save">新增评价</view>
		<view class="feedback-add" v-if="show_type == 1" @click="insert">提交</view>
		<!-- <view class="feedback-cancel" v-if="show_type == 1 || show_type == 2" @click="cancel">取消</view> -->
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	let _this;
	export default {
	    data() {
	      return {
			  status: 'loadmore',
			  is_list_all:false,
			  limit: 10,
			  page: 1,
			  total: 1,
			  star:0,
			  dict: '',
			  list:[],
			  add_title:'',
			  add_content:'',
			  detail_comment:'',
			  detail:'',
			  processId:'',
			  show_type:0,
	          activities: [{
	          content: '支持自定义颜色',
	          timestamp: '2018-04-03 20:46',
	          color: '#1869e0',
			  is_top:true,
	        }]
	      };
	    },
		created() {
			_this = this;
		},
		computed: mapState(['hasLogin', 'userName', 'token']),
		mounted() {
			this.get_dict();
			this.get_list();
			
		},
		methods:{
			getMore(){
				if(_this.page == Math.floor(_this.total/_this.limit)+1){
					_this.$refs.uToast.show({
						title: '没有更多数据',
						duration: 2000,
						position: 'bottom',
					})
				}else{
					_this.page ++;
					_this.get_list();
				}
			},
			show_detail(item){
				this.show_type = 2;
				uni.request({
					url: this.$store.state.ip + 'work/workform/detail/'+item.id, //仅为示例，并非真实接口地址。
					method: 'get',
					header: {
						'Authorization': 'Bearer ' + this.token,
					},
					success: (res) => {
						if (res.data.code == 200) {
							_this.detail = res.data.data;
							_this.processId = res.data.data.processId;
						} else if (res.data.code == '040081') {
				
							_this.$refs.uToast.show({
								title: '登录过期，请重新登录',
								url: '/pages/login/login',
								duration: 2000,
								position: 'bottom',
								params: {
									id: 1,
									menu: 3
								}
							})
				
							console.log(res);
						}else{
							_this.$refs.uToast.show({
								title: res.data.msg,
								duration: 2000,
								position: 'bottom',
							})
							
						}
				
				
					},
					fail: (res) => {
						console.log(res);
					}
				});
			},
			get_dict(){
				uni.request({
					url: this.$store.state.ip + 'admin/dict/findDict?keyword=work', //仅为示例，并非真实接口地址。
					method: 'get',
					header: {
						'Authorization': 'Bearer ' + this.token,
					},
					success: (res) => {
						if (res.data.code == 200) {
							_this.dict = res.data.data;
						} else if (res.data.code == '040081') {
				
							_this.$refs.uToast.show({
								title: '登录过期，请重新登录',
								url: '/pages/login/login',
								duration: 2000,
								position: 'bottom',
								params: {
									id: 1,
									menu: 3
								}
							})
				
							console.log(res);
						}else{
							_this.$refs.uToast.show({
								title: res.data.msg,
								duration: 2000,
								position: 'bottom',
							})
							
						}
				
				
					},
					fail: (res) => {
						console.log(res);
					}
				});
			},
			get_list(){
				uni.request({
					url: this.$store.state.ip + 'work/workform/findPage', //仅为示例，并非真实接口地址。
					data: JSON.stringify({
							"page": {
								"size": _this.limit,
								"current":_this.page,
								"orders":[{"column":"create_date","asc":false}]
							},
							"params":{
								"type":"0"
							}
						}),
					method: 'post',
					header: {
						'Authorization': 'Bearer ' + this.token,
					},
					success: (res) => {
						if (res.data.code == 200) {
							_this.list = _this.list.concat(res.data.data.records);;
							_this.total = res.data.data.total;
							_this.page = res.data.data.current;
						} else if (res.data.code == '040081') {
				
							_this.$refs.uToast.show({
								title: '登录过期，请重新登录',
								url: '/pages/login/login',
								duration: 2000,
								position: 'bottom',
								params: {
									id: 1,
									menu: 3
								}
							})
				
							console.log(res);
						}else{
							_this.$refs.uToast.show({
								title: res.data.msg,
								duration: 2000,
								position: 'bottom',
							})
							
						}
				
				
					},
					fail: (res) => {
						console.log(res);
					}
				});
				
			},
			back(){
				if(this.show_type != 0){
					this.show_type = 0;
				}else{
					uni.navigateBack({
						delta:1
					})
				}
				
			},
			add(){
				this.show_type = 1;
			},
			cancel(){
				this.show_type = 0;
			},
			save(){
				if(this.detail_comment == ''){
					_this.$refs.uToast.show({
						title: '评价内容不能为空',
						duration: 2000,
						position: 'bottom',
						
					});
					return;
				}
				if(this.star == 0){
					_this.$refs.uToast.show({
						title: '评价分数不能为空',
						duration: 2000,
						position: 'bottom',
						
					});
					return;
				}
				uni.request({
					url: this.$store.state.ip + 'work/workform/workComment', //仅为示例，并非真实接口地址。
					method: 'post',
					data: JSON.stringify({
						"content": this.detail_comment,
						"processId": this.processId,
						"star":this.star,
						"workFormId":this.detail.object.id
					}),
					header: {
						'Authorization': 'Bearer ' + this.token,
					},
					success: (res) => {
						if (res.data.code == 200) {
							_this.$refs.uToast.show({
								title: '提交成功',
								duration: 2000,
								position: 'bottom',
								
							});
							_this.show_type = 0;
							_this.page = 1;
							_this.list = [];
							_this.get_list();
						} else if (res.data.code == '040081') {
				
							_this.$refs.uToast.show({
								title: '登录过期，请重新登录',
								url: '/pages/login/login',
								duration: 2000,
								position: 'bottom',
								params: {
									id: 1,
									menu: 3
								}
							})
				
							console.log(res);
						}else{
							_this.$refs.uToast.show({
								title: res.data.msg,
								duration: 2000,
								position: 'bottom',
							})
							
						}
				
				
					},
					fail: (res) => {
						console.log(res);
					}
				});
				
			},
			insert(){
				if(this.add_title == ''){
					_this.$refs.uToast.show({
						title: '标题不能为空',
						duration: 2000,
						position: 'bottom',
						
					});
					return;
				}
				if(this.add_content == ''){
					_this.$refs.uToast.show({
						title: '内容不能为空',
						duration: 2000,
						position: 'bottom',
						
					});
					return;
				}
				uni.request({
					url: this.$store.state.ip + 'work/workform/applyWork', //仅为示例，并非真实接口地址。
					method: 'post',
					data: JSON.stringify({
						"title": this.add_title,
						"content": this.add_content,
						"type":0,
						"status":0
					}),
					header: {
						'Authorization': 'Bearer ' + this.token,
					},
					success: (res) => {
						if (res.data.code == 200) {
							_this.$refs.uToast.show({
								title: '提交成功',
								duration: 2000,
								position: 'bottom',
								
							});
							_this.show_type = 0;
							_this.page = 1;
							_this.list = [];
							_this.get_list();
						} else if (res.data.code == '040081') {
				
							_this.$refs.uToast.show({
								title: '登录过期，请重新登录',
								url: '/pages/login/login',
								duration: 2000,
								position: 'bottom',
								params: {
									id: 1,
									menu: 3
								}
							})
				
							console.log(res);
						}else{
							_this.$refs.uToast.show({
								title: res.data.msg,
								duration: 2000,
								position: 'bottom',
							})
							
						}
				
				
					},
					fail: (res) => {
						console.log(res);
					}
				});
				
			},
			
			
			
		}
	  };
</script>

<style>
	.feedback-add{
		margin: 8px 12px;
		text-align: center;
		color: #1869E0;
		border: 1px solid #1869E0;
		border-radius: 24px;
		padding: 10px;
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
	}
	.feedback-add:hover{
		background-color: #1869E0;
		color: #fff;
	}
	.feedback-cancel{
		margin: 10px 12px;
		text-align: center;
		color: #1869E0;
		border: 1px solid #1869E0;
		border-radius: 24px;
		padding: 10px;
	}
	.feedback-cancel:hover{
		background-color: #1869E0;
		color: #fff;
	}
	.feedback{
		background-color: #F2F4F7;
		box-sizing: border-box;
		overflow: hidden;
	}
	.feedback-top img{
			position: absolute;
			left: 0px;
			top: 26px;
			padding: 12px;
		}
	.feedback-top img:active{
		  background-color: #eee;
	}
	.feedback-top{
		background-color: #fff;
		font-size: 16px;
		color: #35374b;
		text-align: center;
		height: 80px;
		line-height: 100px;
	}
	.feedback-model{
		height: 50px;
		border-top: 1px solid #DEDFE2;
		clear: left;
		background-color: #fff;
	}
	.feedback-model-box{
		height: 34px;
		margin: 8px 12px;
		background-color: #f0f1f5;
		border-radius: 40px;
	}
	.feedback-model-box-item{
		float: left;
		width: 50%;
		border-radius: 40px;
		height: 34px;
		color: #a5a6ad;
		font-size: 15px;
		text-align: center;
		line-height: 34px;
	}
	.model-active{
		background-color: #1869e0;
		color: #fff;
	}
	hr{
		margin: 0px;
	}
	.feedback-info{
		padding: 19px 12px;
		background-color: #fff;
	}
	.feedback-info > span{
		color: #242533;
		font-size: 16px;
	}
	.feedback-info-list{
		margin-top: 20px;
		padding: 0px 27px;
	}

	.feedback .done{
		position: absolute;
		top: 80px;
		left: 0;
		right: 0;
		bottom: 60px;
		overflow: auto;
	}
	.feedback .done1{
		overflow: auto;
		padding: 20px 12px;
		box-sizing: border-box;
	}
	.feedback .done-item span{
		display: inline-block;
		width: 70%;
		word-break: break-all;
	}
	.feedback .done1 .u-input{
		margin-bottom: 20px;
		background-color: #fff;
	}
	.feedback .done-item{
		margin: 10px 12px;
		padding: 18px;
		border-radius: 4px;
		background-color: #fff;
		color: #35374B;
	}
	.feedback .done-item:active{
		  background-color: #eee;
	}
	.feedback .done-item-2{
		float: right;
		color: #f63333;
		font-size: 14px;
	}
	.feedback .done-item-3{
		color: #A5A6AD;
		font-size: 13px;
		margin-top: 18px;
	}
	.feedback .el-textarea{
		margin-bottom: 20px;
	}
	.feedback .star{
		margin-bottom: 20px;
		overflow: hidden;
		color: #35374B;
	}
</style>
